/* ====================================================== 
   <!-- Basic Layout Styles -->                                        
/* ====================================================== */
/*
 * 1. Bootstrap 5.x                              - Do not use prefix "poemkit-"
 * 2. Material Container                         
 * 3. Main Wrapper                          
*/



/* 
 ---------------------------
 1. Bootstrap 5.x
 ---------------------------
 */ 
/* New XL container for Bootstrap 5.x */
.container {
	width: auto;
	max-width: 1140px;
}

@media all and (min-width: 1430px) {
	.container {
	    max-width: 1278px;
	}
}



/* 
 ---------------------------
 2. Material Container
 ---------------------------
 */ 

.poemkit-container__bg {
	position: relative;
	z-index: 2;
	overflow: hidden;
	
	.row {
		margin-left: 0;
		margin-right: 0;
	}
	
	&.poemkit-container__bg--no-gutters {
		padding-left: 0;
		padding-right: 0;
	}
	
	&.poemkit-container__bg--white {
		background: #fff;
	}
	
	&.poemkit-container__bg--shadow {
		@include outer-shadow( 'regular' );
	}
	
	&.poemkit-container__bg--rounded-large {
		border-radius: 15px;
	}
	
	&.poemkit-container__bg--rounded-medium {
		border-radius: 7px;
	}
	
	&.poemkit-container__bg--rounded-small {
		border-radius: 2px;
	}
	
	&.poemkit-container__bg--totop-large {
		margin-top: -15rem;
	}
	
	&.poemkit-container__bg--totop-medium {
		margin-top: -10rem;
	}
	
	&.poemkit-container__bg--totop-small {
		margin-top: -5rem;
	}
	
}



@media all and (max-width: 768px) { 
	
	.poemkit-container__bg {
	
		&.poemkit-container__bg--totop-large {
			margin-top: -7rem;
		}

		&.poemkit-container__bg--totop-medium {
			margin-top: -4rem;
		}

		&.poemkit-container__bg--totop-small {
			margin-top: -2rem;
		}	
		
	}	
}


/* 
 ---------------------------
 3. Main Wrapper 
 ---------------------------
 */ 
/* Note: Do not use the "transform" property, otherwise it may affect the internal elements */
.poemkit-wrapper {
	min-height: 100%;
	width: 100%;
	overflow: hidden;
}

/* Show Toolbar when viewing site with WordPress */
.admin-bar .poemkit-wrapper {
	margin-top: 32px;
	
}

/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
    .admin-bar .poemkit-wrapper {
         margin-top: 46px;
    }
}

